今天會帶大家實作一個主要效果：placeholder go up on focus，這是 google 登入畫面會使用的效果

1. 首先建立基本架構，今天只以一個欄位做示範

    <div class="container relative mt-12 bg-gray-700">
      <form>
        <div class="relative z-0 w-full mb-6 group">
          <input type="email" name="floating_email" id="floating_email" placeholder=" " required />
          <label for="floating_email">Email address</label>
        </div>
      </form>
    </div>

• 記得 placeholder 一定要加上內容否則 peer-placeholder-shown 會沒有效果，但因為我們想用 label 當作 placeholder 所以這邊我們給上一個空格

2. 將 input 加上基本樣式包含 focus

<input
            class="appearance-none bg-transparent block border-0 border-b-2 border-gray-300 focus:border-blue-600 focus:outline-none focus:ring-0 peer px-0 py-2.5 text-white text-sm w-full"
            type="email"
            name="floating_email"
            id="floating_email"
            placeholder=" "
            required
          />

• appearance-none 是為了取消瀏覽器的預設樣式

3. 增加與定位 label 樣式

<label
            for="floating_email"
            class="absolute text-sm text-gray-500 duration-300 scale-75 -translate-y-6 top-3 origin-0"
            >Email address</label
          >

• 目前因為 -translate-y-6 與 top-3，label 已經跑到上層，必須這樣做確保使用者輸入資料並前往下一欄後，label 能夠維持在上層，且等等可以配合 peer-placeholder-shown 讓它能夠在欄位內

4. input 加入 peer、label 加入 peer-placeholder-shown

          <label
            for="floating_email"
            class="absolute text-sm text-gray-500 duration-300 scale-75 -translate-y-6 top-3 origin-0 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100"
            >Email address</label
          >

5. label 加入 peer-focus，並加上 -z-10 確保滑鼠移動到 label 處可以顯示 select 的 cursor

          <label
            for="floating_email"
            class="absolute text-sm text-gray-500 duration-300 scale-75 -translate-y-6 top-3 origin-0 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:scale-100 peer-focus:text-blue-600 peer-focus:scale-75 peer-focus:-translate-y-6"
            >Email address</label
          >

以上就是今天分享的內容，幾個需要注意的點大家在實作時也要特別小心～